<template>
	<bigScreenContainer>
		<div class="HomePageClass">
      		<!-- 底层背景动画-开始 -->
			<!-- header -->
			<!-- <header-nav></header-nav> -->
			<div class="page_header" :style="{
        background: `url(${componentContent.imageMap['bg_head']}) no-repeat`,
        'background-size': '100% 100%',
      }">
				<!-- <div class="page_header"> -->
				<span>腾 洋 研 发 驾 驶 舱</span>
			</div>
			<div class="homeContent">
				<!-- <Menu-list></Menu-list> -->
				<div class="homeBody">
					<div class="home_top">
						<com-box titTxt="订单出图周期" :tabData="title1" :value.sync="area1" @tabChange="tabChange1">
							<!-- <div class="c_box">
              <div class="c_chart"> -->
							<div class="chart_" v-if="area1 == '方案周期'" ref="fanganzhouqiDom">
							</div>
							<div class="chart_" v-else-if="area1 == '出图周期'" ref="chutuzhouqiDom">
							</div>
							<div class="chart_" v-else-if="area1 == '验证周期'" ref="yanzhengzhouqiDom"></div>
							<!-- <com-barpicd ref="ctpjts" refName="domCtpjts"></com-barpicd> -->
							<!-- </div>
            </div> -->
						</com-box>
						<com-box titTxt="开模" :tabData="title2" :value.sync="area2" @tabChange="tabChange2">
							<div class="c_box">
								<div class="c_chart">
									<div class="chart_" v-if="area2 == '开模周期'" ref="kaimozhouqiDom"></div>
									<div class="chart_" v-else-if="area2 == '开模合格率'" ref="kaimohegelvDom"></div>
								</div>
							</div>
						</com-box>
						<com-box titTxt="出图分析" :tabData="title3" :value.sync="area3" @tabChange="tabChange3">
							<div class="c_box">
								<div class="c_chart">
									<div class="chart_" v-if="area3 == '累计出图件数'" ref="leijichutujianshuDom"
										key="biangengshuliangDom">
									</div>
									<div class="chart_" v-else-if="area3 == '出图一次合格率'" ref="chutuyicihegelvDom"
										key="chutuyicihegelvDom">
									</div>
									<div class="chart_" v-else-if="area3 == '人员排名'" ref="renyuanpaimingDom"
										key="renyuanpaimingDom"></div>
								</div>
							</div>
						</com-box>
					</div>
					<div class="home_bottom">
						<com-box titTxt="设计变更" :tabData="title4" :value.sync="area4" @tabChange="tabChange4">
							<div class="c_box">
								<div class="c_chart">
									<div class="chart_" v-if="area4 == '变更数量'" ref="biangengshuliangDom"></div>
									<div class="chart_" v-else-if="area4 == '变更周期'" ref="biangengzhouqiDom"></div>
								</div>
							</div>
						</com-box>
						<com-box titTxt="新品问题分析" :tabData="title5" :value.sync="area5" @tabChange="tabChange5">
							<div class="c_box">
								<div class="c_chart">
									<div class="chart_" v-if="area5 == '问题数量'" ref="wentishuliangDom"
										key="wentishuliangDom"></div>
									<div class="chart_" v-else-if="area5 == '问题原因分布'" ref="wentiyuanyinfenbuDom"
										key="wentiyuanyinfenbuDom"></div>
								</div>
							</div>
						</com-box>
						<com-box titTxt="工艺下发及时率" :tabData="title6">
							<div class="chart_" ref="gongyixiafajishilvDom" key="gongyixiafajishilvDom"></div>
							<!-- <com-lined ref="gyxf" refName="domGyxf"></com-lined> -->
						</com-box>
					</div>
				</div>
			</div>
		</div>
	</bigScreenContainer>
</template>
<script>
	// import * as echarts from "echarts";
const comBox = {
  // template: `
  //     <div class="ConBoxClass_">
  //         <div class="title_">
  //             {{ titTxt }}
  //         </div>
  //         <div class="tab_" v-if="tabData.length>0">
  //         <div v-for="item in tabData" :style="{background: item.bgColor}" @click="selectTab(item)">
  //             <label>{{ item.bigTitle }}</label>
  //             <span v-if="item.smallTitle" :style="{color: item.lineColor}">{{ item.smallTitle }}</span>
  //             <hr v-if="item.select" :style="{background: item.lineColor}" />
  //         </div>
  //         </div>
  //         <div class="content_">
  //             <slot />
  //         </div>
  //     </div>
  // `,
  props: {
    titTxt: {
      type: String,
      default: "",
    },
    tabData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    selectTab(item) {
      this.tabData.forEach((it) => {
        it.select = false;
        if (it.bigTitle == item.bigTitle) {
          it.select = true;
        }
      });
      this.$emit("update:value", item.bigTitle);
      this.$emit("tabChange", item.bigTitle);
    },
  },
  render(h) {
    return h(
      "div",
      {
        class: "ConBoxClass_",
        style: {
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
        },
      },
      [
        h(
          "div",
          {
            class: "title_",
            style: {
              textAlign: "center",
              fontSize: "22px",
              color: "#0095ff",
              paddingTop: "20px",
              paddingBottom: "20px",
              height: "60px",
              boxSizing: "border-box",
              flexShrink: "0",
            },
          },
          this.titTxt
        ),
        this.tabData.length > 0
          ? h(
            "div",
            {
              class: "tab_",
              style: {
                height: "60px",
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
                flexShrink: "0",
                borderRadius: "25px",
              },
            },
            this.tabData.map((item) =>
              h(
                "div",
                {
                  style: {
                    background: item.bgColor,
                    flex: 1,
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                    position: "relative",
                  },
                  on: { click: () => this.selectTab(item) },
                },
                [
                  h(
                    "label",
                    {
                      style: {
                        fontSize: "16px",
                        color: "#FFFFFF",
                      },
                    },
                    item.bigTitle
                  ),
                  item.smallTitle
                    ? h(
                      "span",
                      {
                        style: {
                          color: item.lineColor,
                          fontSize: "16px",
                        },
                      },
                      item.smallTitle
                    )
                    : null,
                  item.select
                    ? h("hr", {
                      style: {
                        background: item.lineColor,
                        position: "absolute",
                        width: "100%",
                        height: "2px",
                        border: "none",
                        bottom: "0",
                      },
                    })
                    : null,
                ]
              )
            )
          )
          : null,
        h(
          "div",
          {
            class: "content_",
            style: {
              flex: "auto",
              flexShrink: "0",
              background: "rgba(255, 255, 255, 0.05)",
              overflow: "hidden",
            },
          },
          this.$slots.default
        ),
      ]
    );
  },
};

export default {
  name: "development", // 研发
  components: { comBox },
  data() {
    return {
      componentContent,
      title1: [
        {
          bigTitle: "方案周期",
          smallTitle: "",
          bgColor: "rgba(230,207,92,0.5)",
          lineColor: "rgb(7, 125, 238)",
          select: true,
        },
        {
          bigTitle: "出图周期",
          smallTitle: "",
          bgColor: "rgba(32,252,255,0.2)",
          lineColor: "rgb(7, 125, 238)",
          select: false,
        },
        {
          bigTitle: "验证周期",
          smallTitle: "",
          bgColor: "rgba(143,205,240,0.5)",
          lineColor: "rgb(7, 125, 238)",
          select: false,
        },
      ],
      title2: [
        {
          bigTitle: "开模周期",
          smallTitle: "",
          bgColor: "rgba(70,168,247,0.5)",
          lineColor: "rgb(7, 125, 238)",
          select: true,
        },
        {
          bigTitle: "开模合格率",
          smallTitle: "",
          bgColor: "rgba(230,207,92,0.5)",
          lineColor: "rgb(7, 125, 238)",
          select: false,
        },
      ],
      title3: [
        {
          bigTitle: "累计出图件数",
          smallTitle: "",
          bgColor: "rgba(70,168,247,0.5)",
          lineColor: "rgb(7, 125, 238)",
          select: true,
        },
        {
          bigTitle: "出图一次合格率",
          smallTitle: "",
          bgColor: "rgba(32,252,255,0.2)",
          lineColor: "rgb(7, 125, 238)",
          select: false,
        },
        {
          bigTitle: "人员排名",
          smallTitle: "",
          bgColor: "rgba(143,205,240,0.5)",
          lineColor: "rgb(7, 125, 238)",
          select: false,
        },
      ],
      title4: [
        {
          bigTitle: "变更数量",
          smallTitle: "",
          bgColor: "rgba(70,168,247,0.5)",
          lineColor: "rgb(7, 125, 238)",
          select: true,
        },
        {
          bigTitle: "变更周期",
          smallTitle: "",
          bgColor: "rgba(230,207,92,0.5)",
          lineColor: "rgb(7, 125, 238)",
          select: false,
        },
      ],
      title5: [
        {
          bigTitle: "问题数量",
          smallTitle: "",
          bgColor: "rgba(32,252,255,0.2)",
          lineColor: "rgb(7, 125, 238)",
          select: true,
        },
        {
          bigTitle: "问题原因分布",
          smallTitle: "",
          bgColor: "rgba(70,168,247,0.5)",
          lineColor: "rgb(7, 125, 238)",
          select: false,
        },
      ],
      title6: [
        {
          bigTitle: "工艺下发及时率",
          smallTitle: "",
          bgColor: "rgba(143,205,240,0.5)",
          lineColor: "rgb(7, 125, 238)",
          select: true,
        },
      ],
      area1: "方案周期",
      area2: "开模周期",
      area3: "累计出图件数",
      area4: "变更数量",
      area5: "问题数量",
      dataMonth: [],
      dataName: [],
      dataReason: [],
      option11_data_currentYear: [],

      option12_data_currentYear: [],

      option13_data_currentYear: [],

      option21_data_currentYear: [],

      option22_data_currentYear: [],

      option31_data_lastYear: [],
      option31_data_currentYear: [],

      option32_data_currentYear: [],

      rypm_nameList: [],
      rypm_ctsl: [],

      option41_data_lastYear: [],
      option41_data_currentYear: [],

      option42_data_lastYear: [],
      option42_data_currentYear: [],

      option51_data_lastYear: [],
      option51_data_currentYear: [],

      option61_data_lastYear: [],
      option61_data_currentYear: [],
      currentYear: "",
      lastYear: "",
    };
  },
  computed: {
    option11() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：天",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#43A8F4"],
        series: [
          {
            name: "",
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            // smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "rgba(78,171,146,0.3)" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option11_data_currentYear,
          },
        ],
      };
    },
    option12() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：天",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#4eab92"],
        series: [
          {
            name: "",
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            // smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "rgba(242,179,157,0.3)" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option12_data_currentYear,
          },
        ],
      };
    },
    option13() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：天",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // color: ["#5A78B8"],
        color: ["#F2B39D"],
        series: [
          {
            name: "",
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            // smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "rgba(90,120,184,0.3)" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option13_data_currentYear,
          },
        ],
      };
    },
    option21() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：天",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#F2B39D"],
        series: [
          {
            name: "",
            type: "line",
            // smooth: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            lineStyle: {
              width: 4,
              type: "solid",
            },
            label: {
              show: true,
              position: "top",
              fontSize: 12,
              color: "#F2B39D",
            },
            data: this.option21_data_currentYear,
          },
        ],
      };
    },
    option22() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：%",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["rgb(90,120,184)"],
        series: [
          {
            name: "",
            type: "line",
            // smooth: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            lineStyle: {
              width: 4,
              type: "solid",
            },
            label: {
              show: true,
              position: "top",
              fontSize: 12,
              color: "rgb(90,120,184)",
            },
            data: this.option22_data_currentYear,
          },
        ],
      };
    },
    option31() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：件",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#43A8F4", "rgb(49,234,180)"],
        series: [
          {
            type: "bar",
            name: this.lastYear,
            barWidth: 12,
            itemStyle: {
              barBorderRadius: [6, 6, 0, 0],
            },
            data: this.option31_data_lastYear,
          },
          {
            type: "bar",
            name: this.currentYear,
            barWidth: 12,
            itemStyle: {
              barBorderRadius: [6, 6, 0, 0],
            },
            data: this.option31_data_currentYear,
          },
        ],
      };
    },
    option32() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：%",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#43A8F4"],
        series: [
          {
            type: "bar",
            name: "",
            barWidth: 20,
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
            },
            data: this.option32_data_currentYear,
          },
        ],
      };
    },
    option33() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#DDDDDD",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#DDDDDD",
            },
          },
        },
        yAxis: {
          type: "category",
          data: this.rypm_nameList,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
            },
          },
        },
        legend: { show: false },
        series: [
          {
            name: "出图数量",
            type: "bar",
            data: this.rypm_ctsl,
            barWidth: 16,
            itemStyle: {
              borderRadius: [0, 8, 8, 0],
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                1,
                [
                  {
                    offset: 0,
                    color: "#CCCCCC",
                  },
                  {
                    offset: 1,
                    color: "#43A8F4",
                  },
                ]
              ),
            },
          },
        ],
      };
    },
    option41() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：个",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // color: ["#00FFFF", "#00BFFF"],
        color: ["#E69E7C", "#97D6BF"],
        series: [
          {
            name: this.lastYear,
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#E69E7C" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option41_data_lastYear,
          },
          {
            name: this.currentYear,
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#97D6BF" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option41_data_currentYear,
          },
        ],
      };
    },
    option42() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：天",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#E69E7C", "#97D6BF"],
        series: [
          {
            name: this.lastYear,
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#E69E7C" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option42_data_lastYear,
          },
          {
            name: this.currentYear,
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#97D6BF" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option42_data_currentYear,
          },
        ],
      };
    },
    option51() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：个",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#43A8F4", "#E55050"],
        // color: ["#5A78B8", "#FF8888"],
        series: [
          {
            name: this.lastYear,
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#43A8F4" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option51_data_lastYear,
          },
          {
            name: this.currentYear,
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#E55050" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option51_data_currentYear,
          },
        ],
      };
    },
    option52() {
      return {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "10%",
          top: "center",
          itemWidth: 15,
          itemHeight: 8,
          itemGap: 20,
          textStyle: {
            color: "#DDDDDD",
            fontSize: 14,
          },
        },
        // color: ['#02F3F0', '#0294F5', '#EFE362', '#0BEB8A', '#6060F9', '#6EBDF6'],
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            center: ["40%", "55%"],
            data: this.dataReason,
            itemStyle: {
              borderColor: "#2b3841",
              borderWidth: 1,
            },
            label: {
              formatter: "{b}:{d}%",
              textStyle: {
                color: "inherit",
                fontSize: 14,
                fontWeight: 600,
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "#DDDDDD",
              },
            },
          },
        ],
      };
    },
    option61() {
      return {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "10%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：%",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 20, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // color: ["#4eab92", "rgb(21, 133, 170)"],
        color: ["#43A8F4", "#4eab72"],
        series: [
          {
            name: this.lastYear,
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#43A8F4" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option61_data_lastYear,
          },
          {
            name: this.currentYear,
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 4
            },
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#4eab72" }, // 渐变色的起始颜色
                  { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                ]
              ),
            },
            data: this.option61_data_currentYear,
          },
        ],
      };
    },
  },
  created() {
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    currentDate.setFullYear(currentYear - 1);
    const lastYear = currentDate.getFullYear();
    this.currentYear = currentYear;
    this.lastYear = lastYear;
  },
  async mounted() {
    await this.getData();
    console.log(this.option11_data_currentYear);
    console.log(this.rypm_nameList);
    console.log(this.dataReason);

    this.$nextTick(() => {
      console.log(111);
      echarts.init(this.$refs.fanganzhouqiDom).setOption(this.option11);
      echarts.init(this.$refs.kaimozhouqiDom).setOption(this.option21);
      echarts
        .init(this.$refs.leijichutujianshuDom)
        .setOption(this.option31);
      echarts
        .init(this.$refs.biangengshuliangDom)
        .setOption(this.option41);
      echarts.init(this.$refs.wentishuliangDom).setOption(this.option51);
      echarts
        .init(this.$refs.gongyixiafajishilvDom)
        .setOption(this.option61);
    });
  },
  methods: {
    async getData() {
      await this.WitGlobal.requestCode(
        "SJKB.YF.db.manage.selectBoardYfY",
        {}
      ).then((res) => {
        if (res.code == 200) {
          this.dataMonth = res.data;
          // this.dataMonth = [{ "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "1", "ljctjs": "123", "f_id": "634724866490138373", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "10", "ljctjs": "123", "f_id": "634724866502721291", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "11", "ljctjs": "123", "f_id": "634724866502721293", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "12", "ljctjs": "123", "f_id": "634724866502721295", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "2", "ljctjs": "123", "f_id": "634724866498526982", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "3", "ljctjs": "123", "f_id": "634724866498526984", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "4", "ljctjs": "123", "f_id": "634724866498526986", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "5", "ljctjs": "123", "f_id": "634724866498526988", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "6", "ljctjs": "123", "f_id": "634724866498526990", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "7", "ljctjs": "123", "f_id": "634724866502721285", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "8", "ljctjs": "123", "f_id": "634724866502721287", "fazq": "12", "kmhgl": "19" }, { "yzzq": "15", "ctychgl": "46", "wtsl": "18", "gyxfjsl": "13", "year": "2024", "ctzq": "14", "kmzq": "15", "bgsl": "15", "bgzq": "4", "month": "9", "ljctjs": "123", "f_id": "634724866502721289", "fazq": "12", "kmhgl": "19" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "1", "ljctjs": "12", "f_id": "634724866498526981", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "10", "ljctjs": "12", "f_id": "634724866502721292", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "11", "ljctjs": "12", "f_id": "634724866502721294", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "12", "ljctjs": "12", "f_id": "634724866502721296", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "2", "ljctjs": "12", "f_id": "634724866498526983", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "3", "ljctjs": "12", "f_id": "634724866498526985", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "4", "ljctjs": "12", "f_id": "634724866498526987", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "5", "ljctjs": "12", "f_id": "634724866498526989", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "6", "ljctjs": "12", "f_id": "634724866498526991", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "7", "ljctjs": "12", "f_id": "634724866502721286", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "8", "ljctjs": "12", "f_id": "634724866502721288", "fazq": "12", "kmhgl": "3" }, { "yzzq": "2", "ctychgl": "4", "wtsl": "42", "gyxfjsl": "12", "year": "2023", "ctzq": "12", "kmzq": "3", "bgsl": "3", "bgzq": "2", "month": "9", "ljctjs": "12", "f_id": "634724866502721290", "fazq": "12", "kmhgl": "3" }]
          let monthList = [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ];
          monthList.forEach((month) => {
            let filetrList = this.dataMonth.filter(
              (i) => Number(month) == Number(i.month)
            );
            let filterCurrentYear = filetrList.filter(
              (i) => i.year == this.currentYear
            );
            if (filterCurrentYear.length > 0) {
              if (filterCurrentYear[0].fazq)
                this.option11_data_currentYear.push(
                  filterCurrentYear[0].fazq
                );
              else this.option11_data_currentYear.push(0);
              if (filterCurrentYear[0].ctzq)
                this.option12_data_currentYear.push(
                  filterCurrentYear[0].ctzq
                );
              else this.option12_data_currentYear.push(0);
              if (filterCurrentYear[0].yzzq)
                this.option13_data_currentYear.push(
                  filterCurrentYear[0].yzzq
                );
              else this.option13_data_currentYear.push(0);
              if (filterCurrentYear[0].kmzq)
                this.option21_data_currentYear.push(
                  filterCurrentYear[0].kmzq
                );
              else this.option21_data_currentYear.push(0);
              if (filterCurrentYear[0].kmhgl)
                this.option22_data_currentYear.push(
                  filterCurrentYear[0].kmhgl
                );
              else this.option22_data_currentYear.push(0);
              if (filterCurrentYear[0].ljctjs)
                this.option31_data_currentYear.push(
                  filterCurrentYear[0].ljctjs
                );
              else this.option31_data_currentYear.push(0);
              if (filterCurrentYear[0].ctychgl)
                this.option32_data_currentYear.push(
                  filterCurrentYear[0].ctychgl
                );
              else this.option32_data_currentYear.push(0);
              if (filterCurrentYear[0].bgsl)
                this.option41_data_currentYear.push(
                  filterCurrentYear[0].bgsl
                );
              else this.option41_data_currentYear.push(0);
              if (filterCurrentYear[0].bgzq)
                this.option42_data_currentYear.push(
                  filterCurrentYear[0].bgzq
                );
              else this.option42_data_currentYear.push(0);
              if (filterCurrentYear[0].wtsl)
                this.option51_data_currentYear.push(
                  filterCurrentYear[0].wtsl
                );
              else this.option51_data_currentYear.push(0);
              if (filterCurrentYear[0].gyxfjsl)
                this.option61_data_currentYear.push(
                  filterCurrentYear[0].gyxfjsl
                );
              else this.option61_data_currentYear.push(0);
            } else {
              this.option11_data_currentYear.push(0);
              this.option12_data_currentYear.push(0);
              this.option13_data_currentYear.push(0);
              this.option21_data_currentYear.push(0);
              this.option22_data_currentYear.push(0);
              this.option31_data_currentYear.push(0);
              this.option32_data_currentYear.push(0);
              this.option41_data_currentYear.push(0);
              this.option42_data_currentYear.push(0);
              this.option51_data_currentYear.push(0);
              this.option61_data_currentYear.push(0);
            }
            let filterLastYear = filetrList.filter(
              (i) => i.year == this.lastYear
            );
            if (filterLastYear.length > 0) {
              if (filterLastYear[0].ljctjs)
                this.option31_data_lastYear.push(
                  filterLastYear[0].ljctjs
                );
              else this.option31_data_lastYear.push(0);
              if (filterLastYear[0].bgsl)
                this.option41_data_lastYear.push(
                  filterLastYear[0].bgsl
                );
              else this.option41_data_lastYear.push(0);
              if (filterLastYear[0].bgzq)
                this.option42_data_lastYear.push(
                  filterLastYear[0].bgzq
                );
              else this.option42_data_lastYear.push(0);
              if (filterLastYear[0].wtsl)
                this.option51_data_lastYear.push(
                  filterLastYear[0].wtsl
                );
              else this.option51_data_lastYear.push(0);
              if (filterLastYear[0].gyxfjsl)
                this.option61_data_lastYear.push(
                  filterLastYear[0].gyxfjsl
                );
              else this.option61_data_lastYear.push(0);
            } else {
              this.option31_data_lastYear.push(0);
              this.option41_data_lastYear.push(0);
              this.option42_data_lastYear.push(0);
              this.option51_data_lastYear.push(0);
              this.option61_data_lastYear.push(0);
            }
          });
        }
      });
      await this.WitGlobal.requestCode(
        "SJKB.YF.db.manage.selectBoardYfAtt",
        {}
      ).then((res) => {
        if (res.code == 200) {
          this.dataName = res.data;
          // this.dataName = [{ "rypm_name": "张三", "wtyyfb_yy": "不清晰", "wtyyfb_wtgs": 12, "f_id": "634705400817549189", "rypm_ctsl": "12" }, { "rypm_name": "李四", "f_id": "634739696777330501", "rypm_ctsl": "1" }]
          this.dataName.forEach((item) => {
            if (item.rypm_name && item.rypm_ctsl) {
              this.rypm_nameList.unshift(item.rypm_name);
              this.rypm_ctsl.unshift(item.rypm_ctsl);
            }
          });
        }
      });
      await this.WitGlobal.requestCode(
        "SJKB.YF.db.manage.selectBoardYfWt",
        {}
      ).then((res) => {
        if (res.code == 200) {
          this.dataReason = res.data.map((item) => {
            if (item.wtyyfb_yy && item.wtyyfb_wtgs) {
              return {
                value: item.wtyyfb_wtgs,
                name: item.wtyyfb_yy,
              };
            }
          });
          // this.dataReason = [{ "wtyyfb_yy": "缺失", "wtyyfb_wtgs": 5, "f_id": "634739776527826757" }, { "rypm_name": "张三", "wtyyfb_yy": "不清晰", "wtyyfb_wtgs": 12, "f_id": "634705400817549189", "rypm_ctsl": "12" }].map(item => {
          //   if (item.wtyyfb_yy && item.wtyyfb_wtgs) {
          //     return { value: item.wtyyfb_wtgs, name: item.wtyyfb_yy }
          //   };
          // })
        }
      });
    },
    tabChange1(name) {
      if (name == "方案周期") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.fanganzhouqiDom)
            .setOption(this.option11);
        });
      } else if (name == "出图周期") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.chutuzhouqiDom)
            .setOption(this.option12);
        });
      } else if (name == "验证周期") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.yanzhengzhouqiDom)
            .setOption(this.option13);
        });
      }
    },
    tabChange2(name) {
      if (name == "开模周期") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.kaimozhouqiDom)
            .setOption(this.option21);
        });
      } else if (name == "开模合格率") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.kaimohegelvDom)
            .setOption(this.option22);
        });
      }
    },
    tabChange3(name) {
      if (name == "累计出图件数") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.leijichutujianshuDom)
            .setOption(this.option31);
        });
      } else if (name == "出图一次合格率") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.chutuyicihegelvDom)
            .setOption(this.option32);
        });
      } else if (name == "人员排名") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.renyuanpaimingDom)
            .setOption(this.option33);
        });
      }
    },
    tabChange4(name) {
      if (name == "变更数量") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.biangengshuliangDom)
            .setOption(this.option41);
        });
      } else if (name == "变更周期") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.biangengzhouqiDom)
            .setOption(this.option42);
        });
      }
    },
    tabChange5(name) {
      if (name == "问题数量") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.wentishuliangDom)
            .setOption(this.option51);
        });
      } else if (name == "问题原因分布") {
        this.$nextTick(() => {
          echarts
            .init(this.$refs.wentiyuanyinfenbuDom)
            .setOption(this.option52);
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>

	.page_board {
		// width: 1920px;
		// height: 1080px;
		// background: #f1f1f1;
		// display: flex;
		// flex-direction: column;
		// font-size: 14px;
		// line-height: normal;
	}

	.chart_ {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.05);
	}

	.page_header {
		height: 80px;
		line-height: 70px;
		background: url(./top.png) no-repeat;
		background-size: cover;
		font-weight: 600;
		font-size: 24px;
		color: #ffffff;
		text-align: center;
      span{
          font-weight: 600;
          font-size: 40px;
          color: #ffffff;
          text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
          background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          text-align: center;
          padding-top: 36px;
      }
	}

	.HomePageClass {
		width: 1920px;
		height: 1080px;
		.homeContent {
			flex: auto;
			position: relative;
			margin-top: -60px;

			.homeBody {
				width: 100%;
				height: calc(100% - 65px);
				margin-top: 65px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0 40px 40px 40px;

				&>div {
					flex: 1;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					&>div {
						flex: 1;

						&:not(:last-child) {
							margin-right: 40px;
						}
					}
				}

				.c_box {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;

					.c_title {
						padding-left: 42px;
						margin-top: 26px;

						span {
							font-size: 24px;
							color: #ffffff;
							margin-right: 16px;
						}

						label {
							font-weight: 600;
							font-size: 28px;
							color: #ffffff;
						}
					}

					.c_chart {
						flex: auto;
					}
				}

				.home_top {
					height: 480px;
				}

				.home_bottom {
					height: 480px;
				}
			}
		}
	}
</style>